<template>
  <div class="right-turnoverMask">
    <div class="mask-detail">
           <div @click="close" class="close" v-if="!isHall" />
           <div :class="isHall?'top-flex':'top-content'">
            <div>枇杷文旅服务营业额占比</div>
            <SelectYear @getYear="getYear" :yearOptions="yearOptions" :defaultYear="isHall?defaultYear1:defaultYear" />
           </div>
           <div ref="myChart1" style="height:180px; width: 360px"></div>
            <div class="scroll-content">
               <dv-scroll-board :config="config" style="width: 100%; height: 140px" ref="scrollBoard" />
            </div>
       </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import SelectYear from '../SelectYear.vue'
import {queryCulturalTourismListdp } from '@/api/dashboards'
export default {
    components:{SelectYear},
     props:{
        isHall:{
            type:Number
        },
         yearList:{
            type:Array
        },
         defaultYear:{
            type:[Number,String]
        }
    },
  data(){
    return{
        yearOptions:[],
        defaultYear1:undefined,
        option1:{},
        show:false,
        chartsData:[],
        config :{}
    }
  },
   watch: {
    isHall:{
        immediate: true,
        handler: function(val) {
            if(val){
            }
        }
    },
     yearList:{
            immediate:true,
            handler: function(val) {
                if(val){
                    this.yearOptions = val
                    this.defaultYear1 = val.length&&val[val.length-1].value
                    this.queryCulturalTourismListdp(this.defaultYear1)
                }
            },
        },
        defaultYear:{
            immediate:true,
            handler: function(val) {
                if(val){
                    this.defaultYear = val
                    this.queryCulturalTourismListdp(this.defaultYear)
                }
            },
        }
    },
  created(){
  },
  mounted() {
  },
  methods: {
    async queryCulturalTourismListdp(val) {
        let res = await queryCulturalTourismListdp({year:val})
        this.chartsData = res.result&&res.result.length&&res.result
        this.initChart1()
    },
    getYear(val) {
        if(val){
           this.queryCulturalTourismListdp(val)
        }
    },
    close(){
        this.$emit('closeMask', false)
    },
    compare(property,desc) {
        return (a, b)=> {
            var value1 = a[property];
            var value2 = b[property];
            if(desc==true){
                // 升序排列
                return value1 - value2;
            }else{
                // 降序排列
                return value2 - value1;
            }
        }
    },
    initChart1() {
        let color = ['#4F4CFF', '#04E9B0', '#FF8300', '#FFC400', '#00DFFF'];
        this.totalNum = this.chartsData.length&&this.chartsData.reduce((c, item) => c + item.turnover * 1, 0)
        let baseData = [];
        for (var i = 0; i < this.chartsData.length; i++) {
        baseData.push({
            value: this.chartsData[i].turnover,
            name: this.chartsData[i].category,
            label: {
                color: color[i],
            },
            itemStyle: {
            normal: {
                color:color[i],
                borderRadius:11,
                borderWidth:11,
                borderColor: color[i]
            }
            }
        });
        }
        let myChart = echarts.init(this.$refs.myChart1)
        this.option1 = {
        title: [
                {
                    text:this.totalNum,
                    top: '36%',
                    textAlign: 'center',
                    left: '48.5%',
                    textStyle: {
                        color: '#fff',
                        fontSize: 18,
                        fontWeight: '600',
                    },
                },
                {
                    text:'总量产值',
                    top: '50%',
                    textAlign: 'center',
                    left: '48.5%',
                    textStyle: {
                        color: 'rgba(255, 255, 255, 0.4)',
                        fontSize: 12,
                        fontWeight: '400',
                    },
                },
            ],
            // color: color,
            tooltip: {
                show: false,
            },
            legend: {
                show: false
            },
            grid: {
                top: '0',
                left: '50%',
            },
            series: [
                {
                zlevel: 1,
                name: '塘栖枇杷种植株数及各品种占比',
                type: 'pie',
                selectedMode: false,
                radius: [50, 55],
                center: ['50%', '50%'],
                startAngle: '140',
                hoverAnimation: false,
                labelLine:{
                    show:false
                },
                color: this.chartsData&&this.chartsData.length&&this.chartsData.map((l, index) => {
                    return color[index]
                }),
                label: {
                    normal: {
                    show: true,
                    formatter: ['{c|{c}}', '{b|{b}}'].join('\n'),
                    rich: {
                        b: {
                        fontSize: 14,
                        fontWeight: 600,
                        padding:[0,0,0,2]
                        },
                        c: {
                        fontSize: 12,
                        fontWeight: 400,
                        color: 'rgba(255, 255, 255, 0.6)',
                        }
                    },
                    color: this.chartsData&&this.chartsData.length&&this.chartsData.map((l, index) => {
                    return color[index]
                    }),
                    bleedMargin: "-90",
                    position:"outer",
                    showAbove:true,
                    padding: [0,10, 0, 7],
                    formatter: (params) => {
                            this.chartsData.map(item=>{
                             if(params.data.name===item.category){
                                item.percent = params.percent+'%'
                             }
                            })
                            let dataList = []
                            this.chartsData.forEach(item=>{
                                dataList.push([item.category,item.turnover,item.percent])
                            })
                            dataList= dataList.sort(this.compare("production",false))
                            this.config ={
                                align: ['center', 'center', 'center'],
                                waitTime: 3000,
                                headerHeight: 28,
                                index: true,
                                columnWidth: [60, 78, 118,95],
                                rowNum: 4,
                                indexHeader:'排名',
                                header: ['品类', '营业额 (万元)','占比 (%)'],
                                headerBGC: 'rgba(255, 255, 255, 0.04)',
                                oddRowBGC: ' rgba(255, 255, 255, 0.04)',
                                evenRowBGC: 'rgba(0, 255, 203, 0)',
                                data: dataList,
                            }
                        return '●{b| '+params.percent+'%}' + '\n' + '{c| '+params.data.name+'}'
                    },
                    textStyle: {
                        fontSize: 12,
                        lineHeight: 20,
                    },
                    }
                },
                itemStyle: {
                    normal: {
                    }
                },
                data: baseData
                }
            ]
        };
    myChart.setOption(this.option1)
    },
  },
}
</script>
<style lang="less" scoped>
.right-turnoverMask {
     /deep/ .ant-select-selection-selected-value{
        min-width: 34px;
    }
  width: 360px;
  height: 220px;
  color: #fff;
 .mask-detail{
        width: 360px;
        height: 374px;
        // background: rgba(11, 17, 51, 0.85);
        // position: relative;
        // top: -105%;
        // right: 105%;
        // z-index: 1000;
         .close{
            cursor: pointer;
            width: 20px;
            height: 20px;
            background: url('../../assets/close.png') no-repeat;
            background-size: 100% 100%;
            position: absolute;
            right: 12px;
            top: 12px;
        }
         .top-flex{
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 24px 22px 0 24px;
            font-size: 14px;
            font-weight: 600;
            color: #FFFFFF;
        }
        .top-content{
            display: flex;
            align-items: center;
            padding: 24px 10px 0 24px;
        }
        .scroll-content {
            height: 140px;
            overflow: hidden;
            padding:0 24px;
            font-size: 12px;
            color: #FFFFFF;
            /deep/ .dv-scroll-board .header{
            font-size: 12px;
            color: rgba(255, 255, 255, 0.4);
            }
            /deep/  .dv-scroll-board .rows{
                font-size: 12px;
                color: RGBA(229, 230, 234, 1);
                font-weight: 400;
            }
       }
    }
}
</style>